<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		worldStudyListToolApi,
		worldStudyListsApi,
		worldCheckApi,
		worldCheckListApi,
		studyHistoryApi
	} from '/api/request.js';
	import {
		numberToChinese
	} from "/utils/index.js"
	let platform = uni.getStorageSync('platform');
	const props = defineProps({})
	const list = ref([]);
	const query = ref({
		yemian: 2
	})
	onLoad((e) => {
		query.value.yemian = e.id
		console.log(query.value);
	})
	onShow(async (e) => {
		uni.showLoading({})
		let res
		if (query.value.yemian == 2) {
			res = await worldStudyListToolApi();
		} else {
			res = await worldStudyListsApi();
		}
		console.log(res);
		uni.hideLoading()
		list.value = res.data;
	});

	const goback = () => {
		uni.navigateBack();
	};

	const showDayin = (id) => {
		uni.navigateTo({
			url: '/pages/user/components/commonXunLian?id=' + id
		})
	}
	const showpage = (id, ids) => {
		if (!id) {
			return
		}
		uni.navigateTo({
			url: '/pages/user/components/xuexijiluerqianghua?id=' + id + '&ids=' + ids + '&indexs=' + query
				.value.yemian
		})
	}
	const showShaiJian = (id, ids, index, name, all, wai) => {
		if (!wai) {
			return
		}
		let str = `(${name}组合${numberToChinese(index)})`
		uni.navigateTo({
			url: '/pages/user/components/shaijiandanci?id=' + id + '&ids=' + ids + '&index=' + str + '&all=' +
				all
		})
	}
	const showPinXie = (ids) => {
		uni.navigateTo({
			url: '/pages/common/pinxie?word_ids=' + ids + '&indexs=3',
			fail(e) {
				console.log(e);
			}
		})
	}
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 单词学习记录{{query.yemian}} </view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<scroll-view scroll-y="true" :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }">
			<view class="body">
				<uni-collapse ref="collapse">
					<uni-collapse-item v-for="(item, index) in list" :key="index" :open="true"
						:title="item.wordpackage_name" :one="item.all_word_count" :two="item.enter_word_count"
						:there="item.word_count3" @showDaYin="showDayin(item.enter_word_id)"
						:four="item.inventory_word_count" :indexo="query.yemian">
						<view class="lists">
							<view class="item  uni-row" @click="showpage(da.combination_word_id,da.id)"
								v-for="(da, daIndex) in item.list" :key="daIndex">
								<view class="left uni-col" :style="{height:query.yemian==2?'148rpx':''}">
									<view class="top uni-row">
										<view class="left-index">组合{{numberToChinese(daIndex+1)}}</view>
										<view style="font-size: 28rpx;
color: #333333;" class="gengduo" v-if="query.yemian==3">
											: {{da.combination_word_id.split(',').length}}个
										</view>
										<text :class="da.strengthen==1?'active':'default'"></text>
										<view class="type" :class="da.strengthen==1?'active':'default'">

											{{da.strengthen==1?'待强化':'已强化'}}
										</view>
									</view>
									<view class="time" v-show="query.yemian!=3">
										{{da.createtime}}
									</view>
								</view>
								<image v-show="!da.combination_word_id" src="/static/img/user/wancheng.png"
									:style="{ width: query.yemian == 2 ? '120rpx' : '80rpx', height: query.yemian == 2 ? '120rpx' : '60rpx' }">
								</image>
								<view class="bt uni-row" v-show="query.yemian==2"
									@click.stop="showShaiJian(da.id,item.wordpackage_id,daIndex+1,item.wordpackage_name,item.all_word_count,da.combination_word_id)">
									筛检单词
								</view>
								<view class="uni-row" v-show="query.yemian==3">
									<view class="btss uni-row" @click.stop="showPinXie(da.combination_word_id)">
										拼写训练
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</scroll-view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			.lists {
				padding: 0 28rpx;

				.item {
					justify-content: space-between;
					background: #ffffff;
					border-radius: 16rpx;
					padding: 0 28rpx;
					margin-bottom: 16rpx;

					.left {
						padding: 24rpx 0;
						justify-content: space-between;

						.top {
							.left-index {
								font-size: 28rpx;
								color: #333333;
							}

							text {
								width: 10rpx;
								height: 10rpx;
								border-radius: 50%;
								margin: 0 16rpx;

								&.active {
									background: #EF4828;
								}

								&.default {
									background: #5BD145;
								}
							}

							.type {
								font-size: 20rpx;

								&.active {
									color: #EF4828;
								}

								&.default {
									color: #5BD145;
								}
							}
						}

						.time {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.bt {
						justify-content: center;
						width: 106rpx;
						height: 40rpx;
						background: #E9EEF9;
						border-radius: 8rpx;
						font-size: 20rpx;
						color: #6E99F7;
					}

					.bts {
						justify-content: center;
						width: 106rpx;
						height: 40rpx;
						background: #E7E4F8;
						border-radius: 8rpx;
						font-size: 20rpx;
						color: #9893FD;
					}

					.btss {
						margin-left: 20rpx;
						justify-content: center;
						width: 106rpx;
						height: 40rpx;
						background: #F9F0E9;
						border-radius: 8rpx;
						font-size: 20rpx;
						color: #FA6F01;
					}
				}
			}
		}
	}
</style>